<!--表格数据-->
<template>
    <div class="data-table" style="">
        <div class="t-row th hidden-xs">
            <div class="cell">玩家</div>
            <div class="cell">选择</div>
            <div class="cell">投注</div>
            <div class="cell">结果</div>
            <div class="cell">收益</div>
        </div>
        <div class="t-row td" :class="{'dataAnimation':switchFlag}" v-for="item in showData" :key="item.address" v-cloak="">
            <div class="cell ">{{item.token|token(10)}}</div>
            <div class="cell ">{{item.callDataDecoding}}</div>
            <div class="cell ">{{item.amountBet}}</div>
            <div class="cell ">{{item.gameResult}}</div>
            <div class="cell c-orange">{{item.gain && (item.gain + item.symbol) || "-" }} </div>
        </div>
    </div>
</template>

<script type="text/javascript">

	/*加载资源*/

    import { RELATION_HOST } from '@/libs/tron.lib'
	import { API_PLAYER_GAMEDATA } from '@/axios/api'

	export default {
        name: 'gameData',
	    props: {
        	//游戏标识
		    gameFlag: { type: String, default: 'all' },//游戏标识
		    showLimt: { type: Number, default: 1 },//每次显示几条
		    pageSize: { type: Number, default: 20 },//每次显示几条
	    },
	    mixins:[],
        data () {
            return {
	            switchFlag        : false,
	            showIndex         : 0,//要显示数据的开始位置

	            //请求到的数据
	            tableData: [],

	            timeHandlerforShow: null,//轮番显示定时器
	            timeHandlerforRead: null,//读取新数据定时器
            }
        },
        computed: {
        	//根据索引与显示数量计算出显示的数据
        	showData () {
		        return this.tableData.slice(this.showIndex * this.showLimt,  (this.showIndex * this.showLimt) + this.showLimt)
	        },
	        //根据索引与显示数量计算出显示的回合数
	        roundTimes () {
        		return Math.ceil(this.tableData.length / this.showLimt) //向上取整
	        }
        },
        created () {
	        this.getTableData()
        },
	    mounted () {
        	let that = this

            //定时读取数据
		    that.timeHandlerforRead = window.setInterval(() => {
		    	that.getTableData()
		    },120 * 1000)

		    //定时切换要显示的行
		    that.timeHandlerforShow = window.setInterval(() => {
			    that.switchData()
		    },5 * 1000)
	    },
        methods:{
        	//请救数据
	        getTableData () {
		        let that = this
		        API_PLAYER_GAMEDATA({
			        gameFlag: that.gameFlag,
			        pageSize: that.pageSize,
		        }).then((res) => {
			        if (res && res.resultFlag) {
				        that.tableData = res.data
			        }
		        }).catch((e) => {
			        console.log('请求失败',e)
		        });
	        },

	        //切换显示数据
	        switchData () {
	            let that = this
		        that.switchFlag = true
		        that.showIndex = that.showIndex >= that.roundTimes - 1
			        ? 0
			        : that.showIndex + 1
		        window.setTimeout(() => {
			        that.switchFlag = false
		        },1000)

	        }
        },

	    filters:{
		    //token縮減
		    token (t, splic = 4) {
			    return t.slice(0, splic) + '...' + t.slice(-splic)
		    },
	    },
	    beforeDestroy () {
		    clearInterval(this.timeHandlerforShow)
		    clearInterval(this.timeHandlerforRead)
	    }
    }
</script>

<style lang="less" scoped>

    /*公共变量*/
    @import '~@/assets/global.less';

    /*动态表现*/
    .dataAnimation{animation: myfirst .5s; -moz-animation: myfirst .5s;	-webkit-animation: myfirst .5s;}
    @keyframes myfirst{
	   /* 0% {background: #ff0; color:#fff !important; font-size:20px; transform:scale(1); opacity: 0; }
	    10% {background: #9ef; color:#fff !important; font-size:20px; transform:scale(1.1,1.1); opacity: 1; }
	    75% {background: #9ef; color:#fff !important; font-size:20px; transform:scale(1); }
	    100%{background: #999; font-size:16px; transform:scale(0.9); }*/
    }


    /*表格*/
    .data-table {color:#fff;max-width:1000px;margin:10px auto 10px;border-radius:5px;background-color: rgba(0,0,0,0.3);
    }
    .data-table .th,.data-table .td {/*统一设置*/

        font-size:16px;padding:10px;border-bottom:1px solid rgba(0,0,0,0.3);
        display:flex;align-items: center;justify-content: space-between;
    }
    .data-table .th {font-size: 16px;font-weight: bold;background-color: rgba(255,255,255,0.1);}
    .data-table .th .cell{}
    .data-table .td {}
    .data-table .td:hover {background-color: rgba(0,0,0,0.5);}
    .data-table .td .cell{}
    .data-table .cell:nth-child(1){flex:6}
    .data-table .cell:nth-child(2){flex:3}
    .data-table .cell:nth-child(3){flex:4}
    .data-table .cell:nth-child(4){flex:3}
    .data-table .cell:nth-child(5){flex:4}

    /**********************适应************************/
    @media screen and (max-width: @MINSCREEN){
        /*表格*/
        .data-table {margin:20px 10px 0px;}
        .data-table .th,.data-table .td {
            font-size:14px;padding:10px;display:block;
        }
        .data-table .td {}
        .data-table .td .cell{}
        .data-table .td .cell:nth-child(1):before{content: '玩家：'}
	    .data-table .td .cell:nth-child(2) {float:left;}
        .data-table .td .cell:nth-child(2):before{content: '选择：'}
	    .data-table .td .cell:nth-child(3) {float:left;}
        .data-table .td .cell:nth-child(3):before{content: '，押注：';}
        .data-table .td .cell:nth-child(4):before{content: '，结果：'}
        .data-table .td .cell:nth-child(5):before{content: '收益：'}

    }



</style>
